<template>
    <div class="footer_guide">
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item " :class="{muiActive:'/msite'=== $route.path }" @click="goTo('/msite')">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label"> <p>首页</p></span>
            </a>
            <a class="mui-tab-item" :class="{muiActive:'/search'=== $route.path }" @click="goTo('/search')">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label"><p>搜索</p></span>
            </a>
            <a class="mui-tab-item"  :class="{muiActive:'/order'=== $route.path }" @click="goTo('/order')">
                <span class="mui-icon mui-icon-extra mui-icon-extra-dictionary"></span>
                <span class="mui-tab-label"><p>订单</p></span>
            </a>
            <a class="mui-tab-item"  :class="{muiActive:'/profile'=== $route.path }" @click="goTo('/profile')">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
                <span class="mui-tab-label"><p>购物车</p></span>
            </a>
        </nav>
    </div>
</template>

<script>

    export default {
       // name: "FooterGuide"
        methods:{
            goTo(path)
            {
                this.$router.replace(path)
            }
        }
    }
</script>

<style scoped lang="scss">
    .muiActive{
        color: green !important;
        p{display: none}
    }

</style>